<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { http } from '../../utils/http'

const router = useRouter();
const createRoomVisiable = ref(false)
const username = ref('')
const imageUrl = 'https://tdesign.gtimg.com/site/avatar.jpg';
let flag = false

interface ResponseData<T>{
    code:number;
    list:T;
} 

interface RoomItem {
    id?: number;
    title?: string;
    owner?: string;
    state?: number; //0为不可进入 1可进入 2为已满 3为游戏进行中 4为游戏已结束
    users?:UserType[]
    count?: number; //游戏人数 max:2
}

interface UserType {
    username:string;
}

const list = ref<RoomItem[]>([
])

const onBack = () => {
    router.back()
}
const onEnter = (i:RoomItem) => {
    if (username.value === '') {
        createRoomVisiable.value = true
        flag = true
        return
    }
    
    router.push({ path: '/', query: { model: 'online', id: i.id,username:username.value } })
}
const onCreatRoom = async () => {
    const data: RoomItem = {
        title: username.value + ' ' + '的游戏房间',
        owner: username.value,
    }
    await http.post('/room', data)
    getRoomList()
}
const getRoomList = async ()=>{
    const res = await http.get<ResponseData<RoomItem[]>>('/room')
    list.value = res.data.list
}
const onConfirm = ()=>{
    if (!flag) {
        onCreatRoom()
    }
    createRoomVisiable.value = false
}
onMounted(()=>{
    getRoomList()
})
</script>
<template>
    <div class="center-page" style="width: 50%;">
        <t-list :split="true">
            <template #header>
                <t-space align="center">
                    <t-button variant="text" theme="default" @click="onBack">
                        返回
                    </t-button>
                    游戏大厅
                </t-space>

            </template>
            <t-list-item v-for="i in list" :key="i.id">
                <t-list-item-meta :image="imageUrl" :title="i.owner + ' ' + '的游戏房间'" :description="i.count + '/2'" />
                <template #action>
                    <span>
                        <t-link theme="primary" hover="color" style="margin-left: 16px"
                            @click="() => onEnter(i)">加入游戏</t-link>
                    </span>
                </template>
            </t-list-item>
            <template #footer>
                <t-space>
                    <t-button variant="text" theme="default" @click="createRoomVisiable = true">
                        创建房间
                    </t-button>
                    <t-button variant="text" theme="default" @click="getRoomList">
                        刷新列表
                    </t-button>
                </t-space>
            </template>
        </t-list>

    </div>
    <t-dialog :visible="createRoomVisiable" :close-btn="true" confirm-btn="确定" cancel-btn="取消"
        :on-close="() => createRoomVisiable = false" :on-confirm="onConfirm">
        <template #header>输入你的名称</template>
        <template #body>
            <t-input v-model="username" />
        </template>
    </t-dialog>
</template>
<style>
.center-page {
    position: relative;
    height: 720px;
    width: 720px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
</style>